<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 100%;
      padding: 10px;
    "
  >
    <div class="content">
      <div class="content_li">
        <el-row :gutter="20">
          <template v-for="(item, index) in bqDataSource" :key="index">
            <el-col :span="6">
              <div class="img" :style="`background-image: url(${item.bg});`">
                <div class="avatar">
                  <img :src="item.icon" />
                </div>
                <div class="text">
                  <div class="text-title">{{ item.name }}</div>
                  <div class="num">
                    <span>
                      {{ item.num }}
                      <!-- <Vue3CountTo :startVal="0" :endVal="item.num" :duration="1000" /> -->
                    </span>
                    &nbsp;个
                  </div>
                </div>
              </div>
            </el-col>
          </template>
        </el-row>
      </div>
    </div>

    <MapPage unitname="安徽省" />
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import MapPage from "./MapPage.vue";
import { listJyz } from "@/api/home";
import { listSb } from "@/api/home";
import { listYwsjgd } from "@/api/home";
import { listYwsjcw } from "@/api/home";
import { listYjbj } from "@/api/home";
import { listSjdc } from "@/api/home";

import { computed } from "vue";

defineOptions({ name: "Index" });

const loading = ref(true);

// 获取统计数
let totalSate = reactive({
  project: 0,
  access: 0,
  todo: 0,
});

const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10,
  };
  totalSate = Object.assign(totalSate, data);
};

// 获取通知公告
let notice = reactive([]);

// const getAllApi = async () => {
//   await Promise.all([getCount(), getNotice()]);
//   loading.value = false;
// };

let jyzNum = ref(0);
let sbNum = ref(0);
let ycNum = ref(0);
onMounted(async () => {
  let res_jyz = await listJyz({ pageNum: 0, pageSize: 0 });
  jyzNum.value = res_jyz.total;
  let res_sb = await listSb({ pageNum: 0, pageSize: 0 });
  sbNum.value = res_sb.total;

  let res1 = await listYwsjgd({ pageNum: 0, pageSize: 0 });
  let res2 = await listYwsjcw({ pageNum: 0, pageSize: 0 });
  let res3 = await listYjbj({ pageNum: 0, pageSize: 0 });
  let res4 = await listSjdc({ pageNum: 0, pageSize: 0 });
  ycNum.value = res1.total + res2.total + res3.total + res4.total;
});
const bqDataSource = computed(() => [
  {
    name: "加油站数",
    num: jyzNum.value,
    icon: new URL("@/assets/images/homePage/icon_bqxx1@2x.png", import.meta.url)
      .href,
    bg: new URL("@/assets/images/homePage/bg_bqxx1@2x.png", import.meta.url)
      .href,
  },
  {
    name: "在线设备数",
    num: sbNum.value,
    icon: new URL(
      "@/assets/images/homePage/icon_bqxx02@2x.png",
      import.meta.url
    ).href,
    bg: new URL("@/assets/images/homePage/bg_bqxx2@2x.png", import.meta.url)
      .href,
  },
  {
    name: "今天传输数据量",
    num: 0,
    icon: new URL(
      "@/assets/images/homePage/icon_bqxx03@2x.png",
      import.meta.url
    ).href,
    bg: new URL("@/assets/images/homePage/bg_bqxx03@2x.png", import.meta.url)
      .href,
  },
  {
    name: "异常情况",
    num: ycNum.value,
    icon: new URL(
      "@/assets/images/homePage/icon_bqxx04@2x.png",
      import.meta.url
    ).href,
    bg: new URL("@/assets/images/homePage/bg_bqxx04@2x.png", import.meta.url)
      .href,
  },
]);

// getAllApi();
</script>

<style lang="scss" scoped>
.content {
  padding-top: 16px;

  .content_li {
    margin-bottom: 24px;
  }

  .img {
    display: flex;
    height: 98px;
    padding: 0 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;

    .text {
      padding-left: 12px;
      color: #000;
      opacity: 0.9;
    }
    // .text-title {
    //   font-weight: 600;
    //   font-size: 18px;
    //   margin: 8px 0 8px 0;
    //   color: #333333;
    // }
    .num {
      // padding-top: 4px;
      span {
        font-size: 24px;
        font-weight: 600;
        color: #333;
      }
    }
  }
}
</style>
